<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem>用户信息</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
     <!-- 模糊查询 -->
    <Form ref="formInfo" label-position="left" :label-width="70" :model="formInfo" inline>
      <FormItem label="账号" prop="userName">
        <i-input v-model="formInfo.userName" placeholder="请输入" style="width: 200px"></i-input>
      </FormItem>
      <Button type="primary" icon="ios-search" @click="selectUsers()">查询</Button>
    </Form>
   <!-- 添加、删除 -->
    <div class="butt">
      <Button type="primary" icon="md-add" @click="addUser">添加</Button>
      <Button type="error"  class="delete">批量删除</Button>
    </div>
    <Table border :columns="columns7" :data="data6" class="table"></Table>
    
    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fenye3">
    </Page>

    <!--修改用户信息弹窗-->
    <Modal v-model="formTable.modal" title="用户修改" @on-cancel="modalCancel" >
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="110"
        :model="formTable"
      >
        <Form-item label="用户账号" prop="userName">
          <i-input v-model="formTable.userName" placeholder="请输入账号"></i-input>
        </Form-item>
        <Form-item label="用户密码" prop="password">
          <i-input v-model="formTable.password" placeholder="请输入密码"></i-input>
        </Form-item>
        <Form-item label="用户电话" prop="phoneNumber">
          <i-input v-model="formTable.phoneNumber" placeholder="请输入电话"></i-input>
        </Form-item>
        <Form-item label="用户头像" prop="iconImg">
          <i-input v-model="formTable.iconImg" placeholder="请输入头像"></i-input>
        </Form-item>
        <Form-item label="用户生日">
          <Row>
            <i-col span="11">
              <Form-item prop="birthday">
                <Date-picker type="date" placeholder="选择日期" v-model="formTable.birthday"></Date-picker>
              </Form-item>
            </i-col>
          </Row>
        </Form-item>
        <!-- <Form-item label="用户性别" prop='gender'>
          <i-input v-model="formTable.gender" placeholder="请输入性别"></i-input>
        </Form-item> -->
         <Form-item label="用户性别" prop="gender" style="width:382px">
            <RadioGroup v-model="formTable.gender">
              <Radio label="1">男</Radio>
              <Radio label="0">女</Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="用户账号状态" prop='state'>
          <i-input v-model="formTable.state" placeholder="请输入状态"></i-input>
        </Form-item>
        <Form-item label="用户是否认证" prop='isAuth'>
          <i-input v-model="formTable.isAuth" placeholder="请输入权限"></i-input>
        </Form-item>
        <Form-item label="用户可贷金额" prop='avaiableAmount'>
          <i-input v-model="formTable.avaiableAmount" placeholder="请输入可贷金额"></i-input>
        </Form-item>
        <Form-item label="用户剩余贷款额度" prop='surplusAmount'>
          <i-input v-model="formTable.surplusAmount" placeholder="请输入剩余贷款额度"></i-input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {};
    return {
      pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
      formInfo: {
        userName: ''
      },
      formTable: {
        modal: false,
        loading: false,
        userId: '',
        userName: '',
        password: '',
        phoneNumber: '',
        iconImg: '',
        gender: '',
        birthday: '',
        state: '',
        isAuth: '',
        avaiableAmount: '',
        surplusAmount: ''
      },

      columns7: [
        {
          type: "selection",
          width: 70,
          align: "center"
        },
        {
          title: "序号",
          key: "userId",
          align: "center",
          width: 80,
        },
        {
          title: "账号",
          key: "userName",
          width: 110,
          align: "center",
        },
        {
          title: "密码",
          key: "password",
          align: "center",
        },
        {
          title: "电话",
          key: "phoneNumber",
          align: "center",
        },
        {
          title: "头像",
          key: "iconImg",
          align: "center",
        },
        {
          title: "性别",
          key: "gender",
          align: "center",
        },
        {
          title: "生日",
          key: "birthday",
          align: "center",
        },
        {
         title: "状态",
          key: "state",
          align: "center",
        },
        {
         title: "是否授权",
          key: "isAuth",
          align: "center",
        },
        {
         title: "收益",
          key: "avaiableAmount",
          align: "center",
        },
        {
         title: "待还款",
          key: "surplusAmount",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 140,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      this.userEdit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index, params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          userId:'',
          userName: '',
          password: '',
          phoneNumber:'',
          iconImg: '',
          gender: '',
          birthday: '',
          state: '',
          isAuth: '',
          avaiableAmount: '',
          surplusAmount: ''
        }
      ]
    };
  },
  methods: {
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getUser();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getUser();
    },
    getUser(){
      this.$axios.get("users",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response =>{
          console.log(response.data);
          this.pageTotal=response.data.tatol
          this.data6 = response.data.data;
        })
        .catch();
    },
    //查询
    selectUsers () {
      this.$axios.get('Users', {
        params: {
          name: this.formInfo.userName
        }
        }).then(response => {
          console.log(response.data)
          this.data6 = response.data.data;
        }).catch()
    
      this.$refs[userName].validate(valid => {
      })
    },
    //用户添加
    addUser() {
      this.$router.push("adduser");
    },
    
     //删除
    remove(index, row) {
      this.$Modal.confirm({
        title: "温馨提示",
        width: 300,
        content: "<p>你确定要删除?删除后不可恢复!</p>",
        loading: false,
        onOk: () => {
          this.data6.splice(index, row.userId);
          this.$axios.delete("users", {
            params: { userId: row.userId }
          });
        }
      });
    },
    //修改
    editSubmit: function(data) {
      console.log(data)
      this.formTable.loading = true;
      this.$axios
        .put("users", {
          userId: this.formTable.userId,
          userName: this.formTable.userName,
          password: this.formTable.password,
          phoneNumber: this.formTable.phoneNumber,
          iconImg: this.formTable.iconImg,
          gender: this.formTable.gender,
          birthday: this.formTable.birthday,
          state: this.formTable.state,
          isAuth: this.formTable.isAuth, 
          avaiableAmount: this.formTable.avaiableAmount, 
          surplusAmount: this.formTable.surplusAmount, 
        })
        .then(response => {
          this.formTable.loading = false;
          if (response.data.code == 0) {
            this.$Notice.success({
              title: "信息修改成功"
            });
          } else {
            this.$Notice.error({
              title: "信息修改失败"
            });
          }
          this.modalCancel();
        })
        .catch(console.log(response.data));
    },
    // 获取每一行值
    userEdit (row) {
      console.log (row)
      this.formTable.modal = true
      this.formTable.userId = row.userId
      this.formTable.userName = row.userName
      this.formTable.password = row.password
      this.formTable.phoneNumber = row.phoneNumber
      this.formTable.iconImg = row.iconImg
      this.formTable.gender = row.gender
      this.formTable.birthday = row.birthday
      this.formTable.state = row.state
      this.formTable.isAuth = row.isAuth
      this.formTable.avaiableAmount = row.avaiableAmount
      this.formTable.surplusAmount = row.surplusAmount
    },
    // 取消修改
    modalCancel () {
      this.formTable.modal = false
      this.$refs['formTable'].resetFields()
    }
  },
   created: function () {
     this.getUser()
    // this.$axios
    //   .get('users')
    //   .then(response => {

    //    console.log(response.data)
    //     this.data6 = response.data.data
    //   })
    //   .catch()
  }
}
</script>

<style >
.fenye3 {
  position: relative;
  margin-top: 30px;
  left: 32%;
}
.table {
  position: relative;
  margin-top: 20px;
}
.delete{
  position: relative;
  left: 30px;
}

.butt{
  position: relative;
  top: 1px;
  left: 1px;
}
</style>